<!DOCTYPE html>
<html>
<head>
    <title>MediaInfo Diff - Easy Compare MediaInfo data </title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <link href="styles/app.diffview.css" rel="stylesheet" />
    <link href="styles/app.css" rel="stylesheet" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/app.difflib.js"></script>
    <script src="js/app.diffview.js"></script>

</head>
<body class="app-background">
<div id="example" class="k-content app-background">
<div id="chart-wrapper" class="chart-wrapper">
    <div class="input-wrapper">
        <div>
            <p class="app-input-groupline">
                <button type="button" id="btn-import" class="blu-btn"><span>Import Media files</span></button>
                <button type="button" id="btn-clear" class="blu-btn"><span>Clear </span></button>
            </p>
        </div>
    </div>

    <div class="climate">
        <hr/>
        <div id="app-tabs">

        </div>

        <div id="compare-result" class="app-box-shadow">

        </div>
    </div>
    <div class="control">
        <div id="progressBar"></div>
        <p>
            <button class="blu-btn" type="button" id="btn-cancel"><span>Cancel</span></button>
            <button class="blu-btn" type="button" id="btn-export"><span>Export Result</span></button>
            <button class="blu-btn" type="button" id="btn-reveal"><span>Reveal in Finder</span></button>
        </p>
    </div>
    <div id="window-info" style="display: none;"></div>
</div>
    <script type="text/x-kendo-template" id="appTabs-template">
        <p>
            <span>1.</span><input id="import-file-left" class="import-file-input"/>
            <span>2.</span><input id="import-file-right" class="import-file-input"/>
        </p>
    </script>

    <script type="text/x-kendo-template" id="info-template">
        <table class="table1">
            <thead>
            <tr>
                <th></th>
                <th scope="col" abbr="Starter">Report</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">Error</th>
                <td class="value">#= error #</td>
            </tr>
            <tr>
                <th scope="row">Support</th>
                <td class="value">#= support #</td>
            </tr>
            </tbody>
        </table>
    </script>

<script src="js/app.js"></script>
<script>
    $(document).ready(app.launch());
</script>

</div>


</body>
</html>
